<template>
	<div class="uiue-card">
		<div class="tit">基本信息</div>
		<a-descriptions class="descri labelRit">
			<a-descriptions-item label="应用名称">{{ datas.appName }} </a-descriptions-item>
			<a-descriptions-item label="应用分类" v-if="!ishs">{{
				$TOOL.dictTypeData('APP_CLASS', datas.appCategory)
			}}</a-descriptions-item>
			<a-descriptions-item label="应用范围" v-if="!ishs">{{
				$TOOL.dictTypeData('app_range', datas.appRange)
			}}</a-descriptions-item>
			<a-descriptions-item label="应用ID" v-if="!ishs">{{ datas.appCode }}</a-descriptions-item>
			<!-- <a-descriptions-item label="应用关键字" v-if="!ishs">{{ datas.appKeywords }}</a-descriptions-item> -->
			<!-- <a-descriptions-item label="应用状态">{{ datas.appStatus == 1 ? '有效' : '无效' }}</a-descriptions-item> -->
			<a-descriptions-item label="项目经理">{{ appContact }}</a-descriptions-item>
			<a-descriptions-item label="技术支持" v-if="!ishs">{{ datas.versionNumber }}</a-descriptions-item>
			<a-descriptions-item label="应用三级系统名">{{ datas?.threeSystemName || '' }}</a-descriptions-item>
			<a-descriptions-item label="反馈接收人" v-if="!ishs">{{ datas.operationsSupport }}</a-descriptions-item>
			<a-descriptions-item label="需求单编号" v-if="!ishs">{{ datas.reqFormCode }}</a-descriptions-item>
			<!-- <a-descriptions-item label="用户范围" v-if="!ishs">{{ datas.appAccountid }}</a-descriptions-item> -->
			<a-descriptions-item label="应用有效期" v-if="!ishs">{{ datas.validTime }}</a-descriptions-item>
			<a-descriptions-item label="应用介绍" :contentStyle="contentStyle" class="scro" v-if="!ishs">
				{{ datas.appDescription }}
			</a-descriptions-item>
			<a-descriptions-item label="其他说明" :contentStyle="contentStyle" class="scro">
				{{ datas.otherInfo }}
			</a-descriptions-item>
			<a-descriptions-item label="双端接入">{{ appAccess }}</a-descriptions-item>
			<a-descriptions-item label="应用归属" v-if="!ishs">{{ platform }}</a-descriptions-item>
			<a-descriptions-item label="移动端预计上线时间" v-if="!ishs && datas.appOnlineTime">{{
				datas.appOnlineTime
			}}</a-descriptions-item>
		</a-descriptions>
		<a-descriptions>
			<a-descriptions-item label="是否接门户端待办" v-if="pcTodoShow">{{ filterRadio(datas.isPcTodo)
				}}</a-descriptions-item>
			<a-descriptions-item label="是否接门户端待阅" v-if="pcTodoShow">{{ filterRadio(datas.isPcReadtodo)
				}}</a-descriptions-item>
			<a-descriptions-item label="无法双端同步接入待办待阅原因" v-if="datas.noAccessTypeRemark">{{
				$TOOL.dictTypeData('REASON_ACCESS', datas.noAccessTypeRemark)
			}}</a-descriptions-item>
		</a-descriptions>
		<a-descriptions>
			<a-descriptions-item label="是否接移动端待办" v-if="appTodoShow">{{ filterRadio(datas.isAppTodo)
				}}</a-descriptions-item>
			<a-descriptions-item label="是否接移动端待阅" v-if="appTodoShow">{{ filterRadio(datas.isAppReadtodo)
				}}</a-descriptions-item>
			<a-descriptions-item label="无法双端同步接入待办待阅其他原因" v-if="datas.noAccessTypeRemark == 5">{{
				datas.appRemark
			}}</a-descriptions-item>
			<!-- <a-descriptions-item label="不接待办/待阅原因" v-if="isShow">{{ datas.noAccessRemark }}</a-descriptions-item> -->
		</a-descriptions>
		<!-- <a-descriptions> -->
		<!-- <a-descriptions-item label="移动端预计计划时间" >{{ datas.appOnlineTime }}</a-descriptions-item>
			<a-descriptions-item label="门户端预计接入时间">{{ datas.pcOnlineTimePC}}</a-descriptions-item> -->
		<!-- <a-descriptions-item label="应用有效期">{{ datas.validTime }}</a-descriptions-item> -->
		<!-- </a-descriptions> -->
		<!-- <a-descriptions v-if="isTest || doneStatus != '0'">
			<a-descriptions-item label="测试应用appId" v-if="datas.appCodeTest">{{ datas.appCodeTest
				}}</a-descriptions-item>
			<a-descriptions-item label="测试账号" v-if="datas.testAccount">{{ datas.testAccount
				}}</a-descriptions-item>
		</a-descriptions> -->
		<template v-if="doneStatus && doneStatus === '0'">
			<a-descriptions v-if="approvalType == 0 && !isBack">
				<!-- <a-descriptions-item v-if="tableName && tableName.includes('APP')" label="是否清理应用数据">{{
				filterRadio(datas.clear)
			}}</a-descriptions-item> -->
				<a-descriptions-item label="下架原因" :contentStyle="contentStyle" class="scro">{{ datas.reason
					}}</a-descriptions-item>
			</a-descriptions>
			<a-form ref="formRef" layout="vertical" class="form-box" v-if="approvalType == 0 && isBack">
				<a-row :gutter="75">
					<!-- <a-col :span="8" v-if="tableName && tableName.includes('APP')">
						<a-form-item label="是否清理应用数据" name="clear" :rules="[{ required: true, message: '请选择' }]">
							<a-radio-group v-model:value="formData.clear" :disabled="isShowClean"
								:options="radioOption" />
						</a-form-item>
					</a-col> -->
					<a-col :span="8">
						<a-form-item label="下架原因" name="reason" :rules="[{ required: true, message: '请输入内容' }]">
							<a-textarea v-model:value="formData.reason" placeholder="请输入内容" />
						</a-form-item>
					</a-col>
				</a-row>
			</a-form>
		</template>
		<template v-if="doneStatus && doneStatus === '1'">
			<a-descriptions v-if="approvalType == 0 && !isBack">
				<!-- <a-descriptions-item v-if="tableName && tableName.includes('APP')" label="是否清理应用数据">{{
				filterRadio(datas.clear)
			}}</a-descriptions-item> -->
				<a-descriptions-item label="下架原因" :contentStyle="contentStyle" class="scro">{{ datas.reason
					}}</a-descriptions-item>
			</a-descriptions>
		</template>

	</div>
</template>

<script setup name="Basic">
import appInfoApi from '@/api/biz/appInfoApi'
import tool from '@/utils/tool'
import roleApi from '@/api/sys/roleApi'
import sysConfig from '@/config/index'
import { useRoute } from 'vue-router'
const route = useRoute()
const { isTest, tableName } = route.query
onMounted(() => {
	appInfoApiList()
})
const labelStyle = ref({
	justifyContent: 'flex-end',
	minWidth: 100
})
// 表单数据
const formData = ref({
	// clear: '', 
	reason: ''
})
const contentStyle = {
	maxHeight: '64px',
	overflowY: 'auto'
}
const approvalType = tool.session.get('approvalType')
const doneStatus = tool.session.get('doneStatus')
const platform = ref()
const datas = inject('detailDate')
// formData.value.clear = datas.value.clear
formData.value.reason = datas.value.reason
// 判断是否是退回的工单
const isBack = computed(() => {
	return tool.session.get('stepId') === 'a001' ? true : false
})
// 业务部门审核环节有不显示的字段
const ishs = computed(() => {
	return tool.data.get('currentName') === '业务部门审核'
})
// const config = [
// 	{ txt: '门户Html', key: '1', type: 'pcPropertiesList', oid: 'PC' },
// 	{ txt: '移动端Html', key: '2', type: 'appPropertiesList', oid: 'APP' },
// 	{ txt: 'Android', key: '3', type: 'androidPropertiesList', oid: 'ANDROID' },
// 	{ txt: 'IOS', key: '4', type: 'iosPropertiesList', oid: 'IOS' },
// 	{ txt: '移动端UMAP', key: '5', type: 'umapPropertiesList', oid: 'UMAP' }
// ]
const config = sysConfig.DEVICE_CONFIG
const appAccess = computed(() => {
	let str = ''
	if (datas.value.appAccess) {
		if (datas.value.appAccess.includes(',')) {
			let arr = config.filter((v) => datas.value.appAccess.includes(v.key))
			str = arr.map((v) => v.txt).join()
		} else {
			str = config.find((v) => v.key === datas.value.appAccess).txt
		}
	}
	return str
})
const pcTodoShow = computed(() => {
	return datas.value.appAccess.includes('1')
})
const appTodoShow = computed(() => {
	let arr = ['2', '3', '4', '5', '6']
	return arr.includes(datas.value.appAccess) || datas.value.appAccess.includes(',')
})

// 不接待办/待阅原因 显示隐藏 todoRead其中只要有’否‘就显示
const todoRead = ['isPcTodo', 'isPcReadtodo', 'isAppTodo', 'isAppReadtodo']
todoRead.forEach((v) => {
	if (datas.value[v] != '1' && datas.value[v] != '0') {
		datas.value[v] = '0'
	}
})

const isShow = computed(() => {
	return todoRead.some((v) => datas.value[v] == 0)
})
// 单选option
const radioOption = [
	{ label: '是', value: '1' },
	{ label: '否', value: '0' }
]
// 单选数据过滤
const filterRadio = (val) => {
	if (val) {
		const obj = radioOption.find((item) => item.value == val)
		return obj.label
	}
}
const appInfoApiList = async () => {
	let arr = await roleApi.getPermissionsdl()
	let hqArr = arr.filter((v) => v.deptId === '001000')
	let allArr = arr.filter((v) => v.deptId !== '001000')
	allArr.sort((a, b) => a.deptId - b.deptId)
	const unicoms = sysConfig.UNICOM_APPRANG
	const list = [...unicoms, ...hqArr, ...allArr]
	const obj = list.find((v) => v.deptId === datas.value.platformBelongId)
	if (obj) platform.value = obj.orgName
}
// 应用联系人数据过滤显示
const appContact = ref()
const isPM = () => {
	appInfoApi.isPM().then((data) => {
		let obj = data.find((v) => v.id == datas.value.appContact)
		appContact.value = obj ? `${obj.name} ${obj.phone || ''} ${obj.email || ''}` : datas.value.appContact
		// 如果是修改 获取显示的应用联系人
	})
}
isPM()
defineExpose({ formData })
</script>

<style lang="less" scoped>
.descri {
	margin-top: 10px;
}
</style>
<style>
/* .scro .ant-descriptions-item-container .ant-descriptions-item-content {
	color: red !important;
} */

.scro .ant-descriptions-item-content::-webkit-scrollbar {
	width: 6px;
	height: 10px;
}

.scro .ant-descriptions-item-content::-webkit-scrollbar-track {
	width: 4px;
	background: rgba(#101F1C, 0.1);
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
}

.scro .ant-descriptions-item-content::-webkit-scrollbar-thumb {
	background-color: rgba(144, 147, 153, .5);
	background-clip: padding-box;
	min-height: 28px;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
	transition: background-color .3s;
	cursor: pointer;
}

.scro .ant-descriptions-item-content::-webkit-scrollbar-thumb:hover {
	background-color: rgba(144, 147, 153, .3);
}
</style>
